import {inject, observer} from "mobx-react";
import {Modal, Button} from "antd";
import {WeaLocaleProvider, WeaFormItem, WeaInput} from "ecCom";
import {getDynamicPassword} from "../../apis/secondAuth";
import * as authTypes from "../../constants/secondAuthType";
const getLabel = WeaLocaleProvider.getLabel;

const formItemLayout = {
    labelCol: {span: 7},
    wrapperCol: {span: 17},
};

@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {countDown: -1, showButton: false};
    }

    componentDidMount() {
        const {needSend} = this.props;

        if (needSend) {
            this.getDynaPwd();
        }
    }

    componentDidUpdate() {
        let $this = this;
        let {countDown} = this.state;

        if (!this.intervalid && countDown > 0) {
            this.intervalid = window.setInterval(() => {
                countDown = countDown - 1;
                $this.setState({countDown});
            }, 1000);
        }

        if (!!this.intervalid && countDown <= 0) {
            window.clearInterval(this.intervalid);
            this.intervalid = null;
        }
    }

    componentWillUnmount() {
        if (!!this.intervalid) {
            window.clearInterval(this.intervalid);
        }
    }

    showAppendHtml() {
        const {countDown, showButton} = this.state;
        if (countDown > 0) {
            return (
                <span className="dynamicPwdAppend">{`${countDown}s`}</span>
            );
        } else if (countDown == 0 || showButton) {
            return (
                <span className="dynamicPwdAppend">
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mcyg6n`} type="primary" onClick={this.getDynaPwd}>{getLabel(22408, "重新发送")}</Button>
                </span>
            );
        }
    }

    saveAuthCode = (val) => {
        const {secondAuthStore} = this.props;
        secondAuthStore.saveAuthCode(val);
    }

    /**
     * 获取动态密码
     */
    getDynaPwd = () => {
        getDynamicPassword({}).then(data => {
            let {api_status, api_errormsg, validSecond} = data;

            if (!api_status) {      //发送二次授权码失败
                this.setState({showButton: true});
                if (!!api_errormsg) {
                    Modal.error({content: api_errormsg});
                }
            } else {    //发送成功
                this.setState({showButton: false, countDown: validSecond});
            }
        });
    }

    render() {
        let wrapperClass = "dynamicPwdWrapper";
        const {countDown, showButton} = this.state;
        if (countDown == 0 || showButton) {
            wrapperClass = "dynamicPwdWrapper2";
        }


        return (
            <div className="content">
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@see832`} {...formItemLayout} label={getLabel(501221, "动态密码")}>
                <span className={wrapperClass}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@v6liof`} viewAttr={3} onChange={this.saveAuthCode}/>
                    {this.showAppendHtml()}
                </span>
                </WeaFormItem>
            </div>
        );
    }
}
